<template>
  <div class="detailPageCss">
    <div class="titleCss">查看职业健康检查数据</div>
    <div class="bodyCss">
      <div class="tableCss">
        <el-table
          v-loading="loading"
          max-height="640"
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column
            prop="enterpriseName"
            label="用工单位名称"
            min-width="200">
          </el-table-column>
          <el-table-column
            prop="personnelName"
            label="姓名"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="data3"
            label="证件号"
            min-width="180">
          </el-table-column>
          <el-table-column
            prop="workStatus"
            label="在岗状态"
            min-width="120">
            <template #default="scope">
              {{ data4Map[scope.row.workStatus] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="blnRecheck"
            label="是否复检"
            min-width="80">
            <template #default="scope">
              {{ data5Map[scope.row.blnRecheck] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="examTime"
            label="体检日期"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="reportIssueTime"
            label="报告出具日期"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="blnAbnormal"
            label="是否异常"
            min-width="80">
            <template #default="scope">
              {{ data7Map[scope.row.blnAbnormal] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="abnormalInfo"
            label="异常信息"
            min-width="200">
          </el-table-column>
          <el-table-column
            prop="data9"
            label="状态"
            min-width="100">
            <template #default="scope">
              {{ data9Map[scope.row.abnormalInfo] }}
            </template>
          </el-table-column>
          <el-table-column
            prop="data10"
            label="退回原因"
            min-width="200">
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="lookDetailBtn(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="margin-top:10px;text-align: right;"
          background
          :pageSize="pageSize"
          layout="prev, pager, next"
          :page-sizes="[10, 20, 50]"
          :total="total"
          @sizeChange="handleSizeChange"
          @currentChange="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
    <div class="bottomBtnCss">
      <el-button @click="goBackBtn">返回</el-button>
    </div>
  </div>
</template>

<script>
import { getCurrentDay } from '@/utils/business.js'
import { getHealthCheckList } from '@/api/zhangping/personDetail'
export default {
  data(){
    return{
      loading:false,
      pageNum:1,
      tableData:[],
      pageSize:10,
      total:10,
      data4Map:{
        0:'上岗前',
        1:'在岗期间',
        2:'离岗前',
      },
      data5Map:{
        0:'是',
        1:'否',
      },
      data7Map:{
        0:'是',
        1:'否',
      },
      data9Map:{
        0:'终审退回',
        1:'待初审',
        2:'初审退回',
      },
    }
  },
  mounted(){
    localStorage.setItem('healthId',this.$route.query.info.identityNumber)
    // this.getList()
    this.initData()
  },
  methods:{
    initData(){
      this.loading = true
      console.log(this.$route.query.info.id)
      getHealthCheckList({identityNumber:this.$route.query.info.identityNumber}).then(res=>{
        this.loading = false
        this.tableData = res.rows || []
        this.total = res.total || 0
      }).catch(err=>{
        console.error(err)
      })
    },
    lookDetailBtn(row){
      const obj = {
        path: '/radiationHygiene/test/personDetail/healthReportDetail/detail',
        query: {
          id: '111',
          info:row,
          identityNumber: this.$route.query.info.identityNumber
        }
      }
      this.$router.push(obj);
    },
    getList(){
      const random = Math.floor( Math.random() * 50 ) + 4
      let list = []
      for( let i=0;i<random;i++){
        const random = Math.floor( Math.random() * 3 )
        const random2 = Math.floor( Math.random() * 2 )
        const random3 = Math.floor( Math.random() * 2 )
        const random4 = Math.floor( Math.random() * 2 )
        const random5 = Math.floor( Math.random() * 3 )
        list.push({
          data1: '【测试数据】福建超瓷新型材料有限公司',
          data2: '张三',
          data3: '3569874521456325874',
          data4: random,
          data5: random2,
          data6: getCurrentDay(),
          data7: random3,
          data8: random4 === 0 ? '-' : '【测试数据】异常信息内容xxx',
          data9: random5,
          data10: '【测试数据】退回原因内容xxx'
        })
      }
      this.tableData = list
    },
    handleCurrentChange(){

    },
    handleSizeChange(){

    },
    resetBtn(){

    },
    searchBtn(){

    },
    goBackBtn(){
      this.$router.back()
    },
  },
}
</script>

<style lang="scss" scoped>
.detailPageCss{
  overflow: hidden;
  position: relative;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  height: calc( 100vh - 66px - 40px);
  display: flex;
  flex-direction: column;
  .titleCss{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
  }
  .bodyCss{
    margin-top: 20px;
    width: calc( 100% - 20px);
    margin-left: 10px;
    height: calc( 100% - 90px);
    overflow-y: auto;
    .el-form{
      display: flex;
      flex-wrap: wrap;
      border-bottom: 1px solid #f2f2f2;
      .formBtnCss{
        margin-left: 20px;
        text-align: center;
      }
    }
  }
  .bottomBtnCss{
    margin-top: auto;
    text-align: right;
  }
}
::v-deep .el-form-item__content{
  width: 200px;
}
</style>
